<template>
  <div class="login-index">
    <div class="pic">
      <img src="https://media.wxcwy.com/mini/images/logo@2x.png" class="img-size-100" />
    </div>
    <button
      class="btn"
      open-type="getPhoneNumber"
      hover-class="none"
      lang="zh_CN"
      @getphonenumber="getPhoneNumber"
    >
      <text>手机号快捷登录</text>
    </button>
    <div @click="toLink" class="nav-btn">手机号验证登录</div>
  </div>
</template>

<script>
var cbUrl = "";
import { mapState, mapMutations } from "vuex";
export default {
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState(["loginInfo", "userInfo", "shareId"]),
  },
  onLoad(options) {
    cbUrl = options.cbUrl;
  },
  methods: {
    ...mapMutations(["changUserInfo", "changToken"]),
    toLink() {
      uni.redirectTo({
        url: "/pages/login/loginPhone?cbUrl=" + cbUrl,
      });
    },
    getPhoneNumber(e) {
      //获取手机号
      if (e.mp.detail.errMsg === "getPhoneNumber:ok") {
        let { encryptedData, iv } = e.mp.detail;
        this.$api
          .getWxPhoneNumber({
            iv,
            encryptedData,
            open_id: this.loginInfo.open_id,
            union_id: this.userInfo.union_id,
            share_code: this.shareId,
          })
          .then((res) => {
            if (res.code == 200) {
              this.changUserInfo(res.data.user_info);
              this.loginSuccess(res.data);
            }
          });
        return;
      }
    },
    loginSuccess() {
      let url = decodeURIComponent(cbUrl);
      if (url.indexOf("backDelta=1") > 0) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.redirectTo({
          url,
          fail() {
            uni.reLaunch({
              url,
            });
          },
        });
      }
    },
  },
};
</script>

<style lang="scss">
.login-index {
  color: #666666;
  font-size: 32rpx;
  line-height: 45rpx;
  padding: 0 30rpx;
  overflow: hidden;
  .img-size-100 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pic {
    width: 260rpx;
    height: 260rpx;
    margin: 120rpx auto;
    border-radius: 50%;
    overflow: hidden;
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    margin: 80rpx auto 0;
    background: linear-gradient(
      270deg,
      rgba(44, 172, 255, 1) 0%,
      rgba(40, 123, 252, 1) 100%
    );
    border-radius: 8rpx;
    color: #fff;
  }
  .nav-btn {
    margin-top: 30rpx;
    text-align: center;
  }
}
</style>
